﻿<!-- 文档类型声明 -->
<!DOCTYPE html> 
<!-- 文档使用中文 -->                 
<html lang = "zh-cn">
  <head>
	<!-- 网页标题 -->
    <title>用户注册</title>
	<!-- 设置当前文档的编码格式 -->
	<meta charset = "utf-8">
	<!-- 设置IE浏览器的解析模式 -->
	<meta http-equiv = "X-UA-Compatible" content = "IE=edge">
	<!-- 设置视窗 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 1.加载Bootstrap的层叠样式表 -->
    <link rel="stylesheet" href="<?php echo base_url();?>/public/css/bootstrap.min.css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="http://cdn.bootcss.com/html5shiv/3.7.0/html5shiv.min.js"></script>
        <script src="http://cdn.bootcss.com/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
	<script type = "text/javascript">
		function mygetObject(id){
			return document.getElementById(id);
		}
		function getXmlHttpObject(){
			var xmlHttpRequest;
			if(window.ActiveXObject){
				xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");
			}
			else{
				xmlHttpRequest=new XMLHttpRequest();
			}
			return xmlHttpRequest;
		}
		var myXmlHttpRequest;
		function sendinfo(){
			myXmlHttpRequest = getXmlHttpObject();
			if(myXmlHttpRequest){
				var url = "<?php echo site_url('login/getuserinfo'); ?>";
				var data = "username="+mygetObject('username').value+"&password="+mygetObject('password').value+"&email="+mygetObject('emailaddress').value+
				"&question="+mygetObject('question').value+"&answer="+mygetObject('answer').value;
				myXmlHttpRequest.open("post",url,true);
				myXmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
				myXmlHttpRequest.onreadystatechange=process;
				myXmlHttpRequest.send(data);
			}
		}
		function process(){
			if(myXmlHttpRequest.readyState == 4 && myXmlHttpRequest.status == 200){
		        var mes = myXmlHttpRequest.responseText;
				alert(mes);
			}
		}
		
		window.onload = function(){
			var cname,cpassword1,cpassword2,cemail;
			function chkreg(){
				if(cname == "yes" && cpassword1 == "yes" && cpassword2 == "yes" && cemail == "yes"){
					mygetObject('rgbutton').disabled = false;
				}else{
					mygetObject('rgbutton').disabled = true;
				}
			}
			chkreg();
			
			mygetObject('username').onblur = function(){
				var name = mygetObject('username').value;
					cname = '';
				if(name != ''){
					if(name.match(/^[a-zA-Z_]*/) == ''){
						mygetObject('usninfo').innerHTML = '<font color = "red">必须以字母或下划线开头</font>';
					}else if(name.length <= 3){
						mygetObject('usninfo').innerHTML = '<font color = "red">注册名称必须大于三位</font>';
					}else{
						mygetObject('usninfo').innerHTML = '<font color = "green">用户名可用</font>';
						cname = 'yes';
					}
					chkreg();
				}
			}
			
			mygetObject('password').onblur = function(){
				var pwd1 = mygetObject('password').value;
				cpassword1 = '';
				if(pwd1 != ''){
					if(pwd1.length < 6){
						mygetObject('pwdinfo').innerHTML = '<font color = "red">密码长度至少需要6位</font>';
					}else if(pwd1.length >=6 && pwd1.length < 12){
						mygetObject('pwdinfo').innerHTML = '<font color = "green">密码强度:弱</font>';
						cpassword1 = 'yes';
					}else if((pwd1.match(/^[0-9]*$/) != null) || (pwd1.match(/^[a-zA-Z]*$/) != null)){
						mygetObject('pwdinfo').innerHTML = '<font color = "green">密码强度:中</font>';
						cpassword1 = 'yes';
					}else{
						mygetObject('pwdinfo').innerHTML = '<font color = "green">密码强度:高</font>';
						cpassword1 = 'yes';
					}
				    chkreg();
				}
			}
			mygetObject('cpassword').onblur = function(){
				var pwd1 = mygetObject('password').value;
				var pwd2 = mygetObject('cpassword').value;
				cpassword2 = '';
				if(pwd2 != '' && pwd1 != pwd2){
					mygetObject('cpwinfo').innerHTML = '<font color = "red">两次密码不一致</font>';
				}else if(pwd2 != '' && pwd1 == pwd2){
					mygetObject('cpwinfo').innerHTML = '<font color = "green">密码输入正确</font>';
					cpassword2 = 'yes';
				}
				chkreg();
			}
			mygetObject('emailaddress').onblur = function(){
				cemail = '';
				var emailreg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
				if(mygetObject('emailaddress').value != ''){
					if(mygetObject('emailaddress').value.match(emailreg) == null){
						mygetObject('emlinfo').innerHTML = '<font color = "red">错误的email格式</font>';
					}else{
						mygetObject('emlinfo').innerHTML = '<font color = "green">输入正确</font>';
						cemail = 'yes';
					}
					chkreg();
				}
			}
		}
	</script>
  </head>
  <body>
    
    <br><br><br><br>
    <div class = "well col-sm-offset-3 col-sm-5">
	
		<form class = "form-horizontal" action = "<?php echo site_url('login/register'); ?>" method = "post">
		
			<h3 class = "text-info col-sm-offset-4">用户注册</h3>
			
			<div class = "form-group">
			    <label class = "col-sm-4 control-label" for = "username">用户名：</label>
			    <div class = "col-sm-4">
				    <input type = "text" class = "form-control" id = "username" name = "username" placeholder = "用户名">
			    </div>
				<div id = "usninfo"></div>
		    </div>
			
			<div class = "form-group">
				<label class = "col-sm-4 control-label" for = "password">密码：</label>
				<div class = "col-sm-4">
					<input type = "password" class = "form-control" id = "password" name = "password" placeholder = "密 码">   
				</div>
				<div id = "pwdinfo"></div>
			</div>
			
			<div class = "form-group">
				<label class = "col-sm-4 control-label" for = "cpassword">确认密码：</label>
				<div class = "col-sm-4">
					<input type = "password" class = "form-control" id = "cpassword" name = "cpassword" placeholder = "确认密码">
				</div>
				<div id = "cpwinfo"></div>
			</div>
			
			<div class = "form-group">
				<label class = "col-sm-4 control-label" for = "emailaddress">邮箱：</label>
				<div class = "col-sm-4">
					<input type = "email" class = "form-control" id = "emailaddress" name = "emailaddress" placeholder = "邮 箱">
				</div>
				<div id = "emlinfo"></div>
			</div>
			
			<div class = "form-group">
				<label class = "col-sm-4 control-label" for = "question">密保问题：</label>
				<div class = "col-sm-4">
					<input type = "email" class = "form-control" id = "question" name = "question" placeholder = "密保问题">
				</div>
				<div id = "qstinfo"></div>
			</div>
			
			<div class = "form-group">
				<label class = "col-sm-4 control-label" for = "answer">密保答案：</label>
				<div class = "col-sm-4">
					<input type = "email" class = "form-control" id = "answer" name = "answer" placeholder = "密保答案">
				</div>
				<div id = "aswinfo"></div>
			</div>
			
			<div class = "col-sm-offset-3 col-sm-1">
				<button type = "button" class = "btn btn-default" id = "rgbutton" name = "rgbutton" onclick = "sendinfo();">注册</button>
			</div>
			<div class = "col-sm-offset-2 col-sm-6">
				<a href = "<?php echo site_url('login/index')?>" class = "btn btn-default" role = "button" >登录</a>
			</div>
		</form>
	</div>
  
    <!-- 2.加载jQuery库，同时加载该库必须在加载bootstrap.min.js之前 -->
    <script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
    <!-- 3.加载bootstrap的核心js库 -->
    <script src="<?php echo base_url();?>/public/js/bootstrap.min.js"></script>
  </body>
</html>